<!DOCTYPE html>
<html lang="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>records</title>
<uieip type="file" value="inc" src="/yqwin/easyui/include.txt" cache="true" minute="1440"></uieip>
<uieip type="file" value="css" src="/yqwin/css/yqwin.min" cache="false"></uieip>
<uieip type="file" value="js" src="/yqwin/data/yqwin.min" cache="false"></uieip>
<script src="/yqwin/src/yq.chart.db.rel.js"></script>
<style>
  body {
    margin: 0px;
  }

  #buttons {
    margin: 5px;
  }
</style>

<body>
  <a href="javascript:window.history.back();">返回</a>
  <div id="myDiagramDiv">
  </div>
  <div id="buttons">
    <button onclick="isEdit(true)">enabled</button>
    <button onclick="isEdit(false)">disable</button>
    <button onclick="getValue()">getValue</button>
    <button onclick="setValue()">setValue</button>
    <button onclick="setClear()">clear</button>
    <button onclick="addNode()">addNode</button>
    <button onclick="destroy()">destroy</button>
    <button onclick="reinit()">reinit</button>
  </div>
  <textarea id="mySavedModel" style="width: 100%; height: 250px"></textarea>
  <script>
    var defaultVal = {
      "nodes": [
        {
          "key": "Record1",
          "name": "Record1",
          "isdata": true,   //数据表
          "fields": [
            { "name": "field1", "info": "", "type": 1 },
            { "name": "field2", "info": "the second one", "type": 1 },
            { "name": "fieldThree", "info": "3rd", "type": 2 },
            { "name": "fieldThree2", "info": "time", "type": 3 }],
          "loc": "-285 -58"
        },
        {
          "key": "Record2",
          "name": "Record2",
          "isdata": false,   //维度表
          "fields": [
            { "name": "fieldA", "info": "", "type": 6 },
            { "name": "fieldB", "info": "", "type": 7 },
            { "name": "fieldC", "info": "", "type": 9 },
            { "name": "fieldD", "info": "fourth" }],
          "loc": "73 36"
        }
      ],
      "links": [
        { "from": "Record1", "fromPort": "field1", "to": "Record2", "toPort": "fieldA", "join": 1 },
        { "from": "Record1", "fromPort": "fieldThree", "to": "Record2", "toPort": "fieldB", "join": 2 },
        { "from": "Record1", "to": "Record2", "fromPort": "field2", "toPort": "fieldD", "join": 3 }
      ]
    };

    $(function () {
      $("#myDiagramDiv").yqChartDbRel({
        isEdit: true,
        value: defaultVal,
        beforBindingTitle: function (callback) {
          callback();
        }, //标题绑定前
        afterBindingTitle: function () {
          $(window).resize(function () {
            onresize();
          });
          onresize();

          getValue();
        },   //标题绑定后
        selectTable: function () {
          console.log("aaaaaaaaaaaa");
        },
        onSave: function (val) {  //保存
          console.log("save", val);
        }
      });
    });

    function onresize() {
      var w = $(window).width();
      var h = $(window).height() - 58;

      $("#myDiagramDiv").yqChartDbRel('resize', {
        width: w,
        height: h / 2
      });

      $("#mySavedModel").css({
        width: w,
        height: h / 2
      });
    }

    function isEdit(tf) {
      $("#myDiagramDiv").yqChartDbRel("isEdit", tf);
    }
    function getValue() {
      $('#mySavedModel').val(JSON.stringify($("#myDiagramDiv").yqChartDbRel("getValue"), null, 2));
      //opt.diagram.isModified = false;
    }
    function setValue() {
      $("#myDiagramDiv").yqChartDbRel("setValue", $('#mySavedModel').val());
    }
    function setClear() {
      $("#myDiagramDiv").yqChartDbRel("clear");
    }
    function addNode() {
      $("#myDiagramDiv").yqChartDbRel("addNode", {});
    }
    function destroy() {
      $("#myDiagramDiv").yqChartDbRel("destroy");
    }
    function reinit() {
      $("#myDiagramDiv").yqChartDbRel({
        value: defaultVal
      });
    }
  </script>
 
</body>

</html>